<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数的适用场景</title>

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>

    <div class="box"></div>

    <script>

        /**
         * 
         * 箭头函数不能作为构造函数使用，也不适用于于定义在对象内,或者为对象绑定箭头函数
         * 箭头函数最大的优势第一点在于写法简洁，第二点在于this静态,后者有利有弊
         * 由于this的静态那么为对象绑定箭头函数this就显得不太灵活，但是在函数内部定义箭头函数是一个好的做法，可以让函数内部的this指向一致 
        */
      
        
         //let box =document.getElementsByClassName("box")[0];

        //  box.addEventListener("click",function(){
        //     setTimeout(() => {
        //      this.style.backgroundColor="red";
             
        //  }, 1000);

        //  })

        //  box.addEventListener("click",setTimeout(() => {
        //     this.style.backgroundColor="blue";
             
        //  }, 1000))


        //  box.onclick =()=>{
        //     // this.style.backgroundColor="blue";
        //     box.style.backgroundColor="blue";

        //  }
        
        function User(){
        }

        User.name = "TOM";

        User.fun1 =function(){
            console.log(this.name);
        }

        User.fun2 = ()=>console.log(this.name);

        User.fun1();
        User.fun2();

         
       
         
         
    </script>
    
</body>
</html>